/**
 * Created by 小敏哥 on 2017/11/27.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import StatusBar from '../../../../../../src/js/components/statusBar';
import style from './index.scss'
import ItemList from '../../../../../../src/js/components/itemList';
import common from '../../../../../js/utils/common'
import {sendOrder} from '../../actions/confirmOrderAction'

class ConfirmOrder extends Component {
    constructor(props) {
        super(props);
    }

    //防止刷新时数据丢失，检查不到数据直接返回首页
    checkData() {
        (!this.props.confirmOrderInfo) && this.context.router.replace('/')
    }

    //清除缓存
    clearCache() {
        localStorage.clear();
        sessionStorage.clear();
    }

    //提交
    confirmSubmit() {
        let apiObj = JSON.parse(sessionStorage.getItem('orderParameters'));
        this.props.dispatch(sendOrder(apiObj, (data) => {
            this.clearCache();
            this.context.router.replace(`success/${encodeURIComponent(this.props.confirmOrderInfo.userName)}/${data.orderIds[0].id}/${data.payOrderId}`);
        }));

    }

    componentDidMount() {
        common.setViewTitle('订单确认');
        this.checkData();
    }

    //构建列表
    structItemList() {
        let {
            idCard,
            userName,
            emergencyContact,
            emergencyPhone,
            receiveName,
            receivePhone,
            fullAddress,
        } = this.props.confirmOrderInfo;
        let itemContent = [[{text: '申请人', value: userName}, {text: '公民身份证号码', value: idCard}], [{
            text: '收件人',
            value: receiveName
        }, {text: '收件人电话', value: receivePhone}, {text: '收件人地址', value: fullAddress}], [{
            text: '紧急联系人',
            value: emergencyContact
        }, {text: '紧急联系人电话', value: emergencyPhone}]];
        return itemContent.map((item, index) => {
            return <div className={style.messageItem} key={index}>
                {item.map((secondItem, secondIndex) => {
                    return <div key={secondIndex}>
                        <div>{secondItem.text}</div>
                        <div>{secondItem.value}</div>
                    </div>
                })}
            </div>
        })
    }

    render() {
        if (this.props.confirmOrderInfo) {
            return <div className={style.confirmOrder}>
                <div className={style.barContent}>
                    <StatusBar status={0} statusArray={[{text: '提交订单'}, {text: '处理订单'}, {text: '订单完成'}]}/>
                </div>

                {/*<div className={style.serviceMessage}>
                    <img src="./images/EMSlogo.png"/>
                    <div className={style.content}>
                        <div>居民身份证邮寄服务</div>
                        <div>客服电话：020-11183</div>
                    </div>
                </div>*/}

                <div className={style.orderMessage}>
                    <ItemList borderPaddingLeft="0.3rem">
                        {this.structItemList()}
                    </ItemList>
                </div>

                <div className={style.buttonContainer}>
                    <button onClick={() => {
                        this.confirmSubmit()
                    }}>提交订单
                    </button>
                </div>
            </div>
        }
        else {
            return <div></div>
        }
    }
}

//使用context
ConfirmOrder.contextTypes = {
    router: React.PropTypes.object.isRequired
};


function mapStateToProps(state) {
    return Object.assign({}, state.confirmOrderInfo);
}

export default connect(mapStateToProps)(ConfirmOrder);